<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单控件状态——焦点状态</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <script src="../../../js/jquery-2.1.1.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
</head>
<body>
<!--加了form-inline之后，将所有的东西都显示到一行-->
<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">邮箱</label>
        <!--表示加入默认的占位符-->
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">

    </div>
    <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 记住密码
        </label>
    </div>
    <button type="submit" class="btn btn-default">进入邮箱</button>
</form>
<hr/>
   <form role="form">
    <div class="form-group">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <select multiple class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
   </form>
       <hr/>
       <form role="form">
           <div class="form-group">
               <textarea class="form-control" rows="3"></textarea>
           </div>
       </form>
       <hr/>
       <form role="form">
           <h3>案例1</h3>
           <div class="checkbox">
               <label>
                   <input type="checkbox" value="">
                   记住密码
               </label>
           </div>
           <div class="radio">
               <label>
                   <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
                   喜欢
               </label>
           </div>
           <div class="radio">
               <label>
                   <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
                   不喜欢
               </label>
           </div>
       </form>
<hr/>
<h3>示例3</h3>
<form role="form">
    <fieldset disabled>
        <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> 无法选择
            </label>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </fieldset>
</form>
<hr/>
<form role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess" placeholder="成功状态" >
        <span class="glyphiconglyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
        ......
    </div>
    <div class="form-group has-error has-feedback">
        ......
    </div>
</form>
<hr/>
<form role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
        <span class="help-block">你输入的信息是正确的</span>
        <span class="glyphiconglyphicon-ok form-control-feedback"></span>
    </div>
    …
</form>
</body>
</html>